<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- 国产浏览器默认采用高速模式渲染页面 -->
    <meta name="renderer" content="webkit">
    <title>度假屋、民宿、体验和攻略 - Airbnb爱比迎</title>
    <!-- Bootstrap.css -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <!-- 字体图标 -->
    <link rel="stylesheet" href="css/font-awesome.css">
    <!-- 修复IE10的媒体查询bug -->
    <link rel="stylesheet" href="css/ie10-viewport-bug-workaround.css">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

    <!-- 标签页图标 -->
    <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
    <!-- 导航栏 -->
    <link rel="stylesheet" href="css/navigation-bar.css">
    <!-- 主体内容 -->
    <link rel="stylesheet" href="css/gushi.css">
</head>

<body>
    <!-- 网页首部 -->
    <header>
        <!-- 导航栏 -->
        <div class="wjc-navigation">
            <!-- 爱彼迎的svg图标 -->
            <div class="wjc-navigation-icon">
                <a href="index.html" target="_self">
                    <svg viewBox="0 0 1000 1000" role="presentation" aria-hidden="true" focusable="false">
                        <path d="m499.3 736.7c-51-64-81-120.1-91-168.1-10-39-6-70 11-93 18-27 45-40 
                            80-40s62 13 80 40c17 23 21 54 11 93-11 49-41 105-91 168.1zm362.2 43c-7 47-39 
                            86-83 105-85 37-169.1-22-241.1-102 119.1-149.1 141.1-265.1 90-340.2-30-43-73-64-128.1-64-111 
                            0-172.1 94-148.1 203.1 14 59 51 126.1 110 201.1-37 41-72 70-103 88-24 13-47 
                            21-69 23-101 15-180.1-83-144.1-184.1 5-13 15-37 32-74l1-2c55-120.1 122.1-256.1 199.1-407.2l2-5 
                            22-42c17-31 24-45 51-62 13-8 29-12 47-12 36 0 64 21 76 38 6 9 13 21 22 36l21 41 3 6c77 151.1 144.1
                            287.1 199.1 407.2l1 1 20 46 12 29c9.2 23.1 11.2 46.1 8.2 
                            70.1zm46-90.1c-7-22-19-48-34-79v-1c-71-151.1-137.1-287.1-200.1-409.2l-4-6c-45-92-77-147.1-170.1-147.1-92 
                            0-131.1 64-171.1 147.1l-3 6c-63 122.1-129.1 258.1-200.1 409.2v2l-21 46c-8 19-12 29-13 32-51 
                            140.1 54 263.1 181.1 263.1 1 0 5 0 10-1h14c66-8 134.1-50 203.1-125.1 69 75 137.1 117.1 203.1 
                            125.1h14c5 1 9 1 10 1 127.1.1 232.1-123 181.1-263.1z">
                        </path>
                    </svg>
                </a>
            </div>

            <div class="wjc-navigation-other">
                <!-- 搜索输入框 -->
                <div class="col-md-6">
                    <form action="#" method="POST" class="form-inline" role="form">
                        <div class="form-group">
                            <div class="input-group">
                                <div class="input-group-addon wjc-navgation-search-prev">
                                    <i class="fa fa-search" aria-hidden="true"></i>
                                </div>
                                <label class="sr-only" for="wjc-navgation-search">搜索</label>
                                <input type="text" name="search" class="form-control" id="wjc-navgation-search"
                                    placeholder="搜索">
                            </div>
                        </div>
                    </form>
                </div>

                <!-- 导航栏菜单 -->
                <nav class="col-md-6">
                    <ul class="wjc-navigation-menu list-inline">
                        <!-- <li class="dropdown">
                            <a id="wjc-nav-currency" href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                                aria-haspopup="true" aria-expanded="false">
                                人民币 - ￥
                            </a>
                            <ul class="dropdown-menu my-nav-dropdown-menu1">
                                <li class="my-nav-dropdown-menu1-title"><a href="#">常用货币</a></li>
                                <li><a href="#">人民币 - ￥</a></li>
                                <li><a href="#">美元 - $</a></li>
                                <li><a href="#">日元 - ￥</a></li>
                                <li><a href="#">港币 - $</a></li>
                                <li><a href="#">新台币 - $</a></li>
                                <li><a href="#">欧元 - $</a></li>
                                <li><a href="#">英镑 - $</a></li>
                                <li class="my-nav-dropdown-menu1-title"><a href="#">其他货币</a></li>
                                <li><a href="#">澳大利亚元 - $</a></li>
                            </ul>
                        </li> -->
                        <li>
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                                aria-expanded="false">
                                手机端
                            </a>
                            <div class="dropdown-menu my-nav-dropdown-menu2">
                                <div>
                                    <img src="img/download_app_other-2216c06ab35e39238e40720ed9bf1439.png" alt="下载手机客户端">
                                    <div>下载手机客户端</div>
                                    <div>&nbsp;</div>
                                </div>
                                <div>
                                    <img src="img/service_account_qr_code_header_other-9291205a414d3af6b492e99d4a0b21e4.png"
                                        alt="关注微信服务号">
                                    <div>关注微信服务号</div>
                                    <div>id：AirbnbOfficial</div>
                                </div>
                            </div>
                        </li>
                        <!-- <li class="show wjc-login-prev">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                                aria-expanded="false">成为房东/体验达人</a>
                            <div class="dropdown-menu my-nav-dropdown-menu3">
                                <div>
                                    <div class="my-nav-dropdown-menu3-title">房源</div>
                                    <div class="wjc-flex-con1">
                                        <div>
                                            <div class="my-nav-dropdown-menu3-link"><a href="#">发布房源</a></div>
                                            <div class="my-nav-dropdown-menu3-content">在<span class="wjc-nav-dropdown-loc">沈阳</span>接待房客，每月为您带来高达<span
                                                    class="wjc-nav-dropdown-monthlyincome">￥5,627</span>的收入</div>
                                        </div>
                                        <div class="my-nav-dropdown-menu3-icon">
                                            <svg viewBox="0 0 24 24" role="presentation" aria-hidden="true" focusable="false"
                                                style="height: 24px; width: 24px; display: block; fill: currentcolor;">
                                                <path d="m23.06 11.4-1.75-1.76-3.85-3.87-3.85-3.87-1.27-1.27-.36-.36-.09-.09c-.23-.23-.55-.23-.75-.02l-1.68 
                                                    1.75-3.68 3.87-3.68 3.87-1.67 1.75a1.47 1.47 0 0 0 -.43 1.05v.02c.01.38.15.76.44 1.05l.55.55a1.49 1.49 0 
                                                    0 0 2.01.08v8.4c0 .81.68 1.45 1.5 1.45h14c .82 0 1.5-.65 1.5-1.45v-8.86l.38.38a1.5 1.5 0 0 0 
                                                    2.13-.01l.55-.55c.59-.59.59-1.54.01-2.13zm-4.06 11.15c0 .24-.22.45-.5.45h-14c-.28 0-.5-.21-.5-.45v-9.41l7.51-7.93 
                                                    7.49 7.48v9.85zm3.35-9.74-.55.55c-.2.2-.52.2-.71.01l-9.24-9.22a.5.5 0 0 0 -.72.01l-8.73 9.22a.5.5 0 
                                                    0 1 -.7-.02l-.55-.55a.5.5 0 0 1 -.01-.71l1.68-1.77 3.69-3.86 3.68-3.87 1.32-1.39c.03.03.07.07.12.12l1.27 
                                                    1.27 3.85 3.87 3.85 3.87 1.75 1.76a.51.51 0 0 1 -.01.71zm-10.85-.81a.5.5 0 0 1 .5.5v3.5h3.5a.5.5 0 1 1 0 
                                                    1h-3.5v3.5a.5.5 0 0 1 -1 0v-3.5h-3.5a.5.5 0 0 1 0-1h3.5v-3.5a.5.5 0 0 1 .5-.5z"
                                                    fill-rule="evenodd"></path>
                                            </svg>
                                        </div>
                                    </div>
                                    <div class="my-nav-dropdown-menu3-link"><a href="#">了解如何出租您的房源</a></div>
                                </div>
                                <hr>
                                <div>
                                    <div class="my-nav-dropdown-menu3-title">体验</div>
                                    <div class="wjc-flex-con1">
                                        <div>
                                            <div class="my-nav-dropdown-menu3-link"><a href="#">开始体验</a></div>
                                            <div class="my-nav-dropdown-menu3-content">带领别人做自己热爱的事并赚取收入</div>
                                        </div>
                                        <div class="my-nav-dropdown-menu3-icon">
                                            <img src="img/bb6d49e059b6c7d8791e9b4e30f8d4cd.svg" alt="开始体验">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li> -->
                        <li class="hidden wjc-login-after">
                            <a href="addhouse.html">添加房源</a>
                        </li>
                        <li class="hidden wjc-login-after">
                            <a href="housecontrol.html">房源管理</a>
                            <!-- <a href="housecontrol.html" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                                aria-expanded="false">管理面板</a>
                            <ul class="dropdown-menu my-nav-dropdown-menu4">
                                <li><a href="housecontrol.html" class="my-nav-dropdown-menu4-title">房源管理</a></li>
                                <li>
                                    <a href="#">
                                        <div class="wjc-flex-con1">
                                            <div>
                                                <span class="my-nav-dropdown-menu4-title">开展体验</span>
                                                <div>与房客分享您最喜爱的一项活动，赚取额外收入</div>
                                            </div>
                                            <div class="my-nav-dropdown-menu3-icon">
                                                <img src="img/bb6d49e059b6c7d8791e9b4e30f8d4cd.svg" alt="开始体验">
                                            </div>
                                        </div>
                                    </a>
                                </li>
                            </ul> -->
                        </li>
                        <li>
                            <a href="story.html" target="_blank">故事</a>
                        </li>
                        <!-- <li class="hidden wjc-login-after">
                            <a href="#">心愿单</a>
                        </li>
                        <li class="hidden wjc-login-after">
                            <a href="#">旅程</a>
                        </li>
                        <li class="hidden wjc-login-after">
                            <a href="#">消息</a>
                        </li>
                        <li>
                            <a href="#">帮助</a>
                        </li> -->
                        <li class="hidden wjc-login-after wjc-user-info">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                                aria-expanded="false">
                                <img id="wjc-user-icon" src="img/aibiying.png" alt="头像" class="img-circle">
                            </a>
                            <ul class="dropdown-menu my-nav-dropdown-menu6">
                                <li><a href="userinfo.html">编辑个人资料</a></li>
                                <!-- <li><a href="#">旅行资金</a></li>
                                <li><a href="#">账号设置</a></li>
                                <li><a href="#">我的指南</a></li>
                                <li><a href="#">商务爱彼迎</a></li> -->
                                <li id="wjc-login-out"><a href="#">退出</a></li>
                            </ul>
                        </li>
                        <li class="show wjc-login-prev">
                            <!-- <a href="#" data-toggle="modal" data-target="#myModal2">注册</a> -->
                            <a href="register.html">注册</a>
                        </li>
                        <li class="show wjc-login-prev">
                            <a href="#" data-toggle="modal" data-target="#myModal">登录</a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </header>

    <!-- 主体内容 -->
    <div style="width: 604px; height: auto; position: absolute; left: 27%; top: 20%;">
        <div style="position: relative;">
            <input type="text" placeholder="请输入搜索内容" value="" style="width: 574px; border-top: none; border-left: none; border-right: none; border-bottom: solid 2px green;">
            <div style="position: absolute; top: -5px; right: 0px; font-size: 30px; z-index: 10000;" onclick="tiaozhuan2()">×</div>
        </div>
        <div>热门目的地</div>
        <p></p>
        <div style="display: flex; width: 604px; ">
            <div style="position: relative; padding-left: 10px; ">
                <div style="width: 48px; height: 48px; border: solid 1px black; border-radius: 24px; background-image: url(img/u=2711650469,920700064&fm=200&gp=0.jpg); background-size: cover;"></div>
                <div style="position: absolute; left: 17px;">东京</div>
            </div>
            <div style="position: relative; padding-left: 10px;">
                <div style="width: 48px; height: 48px; border: solid 1px black; border-radius: 24px; background-image: url(img/timg.jpg); background-size: cover;"></div>
                <div style="position: absolute; left: 17px;">上海</div>
            </div>
            <div style="position: relative; padding-left: 10px;">
                <div style="width: 48px; height: 48px; border: solid 1px black; border-radius: 24px; background-image: url(img/dc86cad1-615d-46c0-a4bd-ec5909b75dbe.jpg); background-size: cover;"></div>
                <div style="position: absolute; left: 17px;">北京</div>
            </div>
            <div style="position: relative; padding-left: 10px;">
                <div style="width: 48px; height: 48px; border: solid 1px black; border-radius: 24px; background-image: url(img/8111fa97-4d97-43a0-87be-196e70e4e7cc.jpg); background-size: cover;"></div>
                <div style="position: absolute; left: 17px;">香港</div>
            </div>
            <div style="position: relative; padding-left: 10px;">
                <div style="width: 48px; height: 48px; border: solid 1px black; border-radius: 24px; background-image: url(img/77f017d9-acd0-4d10-85f3-b23f0b11dbbb.jpg); background-size: cover;"></div>
                <div style="position: absolute; left: 17px;">泰国</div>
            </div>
            <div style="position: relative; padding-left: 10px;">
                <div style="width: 48px; height: 48px; border: solid 1px black; border-radius: 24px; background-image: url(img/u=1377043380,599492539&fm=26&gp=0.jpg); background-size: cover;"></div>
                <div style="position: absolute; left: 17px;">曼谷</div>
            </div>
            <div style="position: relative; padding-left: 10px;">
                <div style="width: 48px; height: 48px; border: solid 1px black; border-radius: 24px; background-image: url(img/3f74cba7-e12d-4582-b5be-bd43c2c70ecb.jpg); background-size: cover;"></div>
                <div style="position: absolute; left: 17px;">硅谷</div>
            </div>
            <div style="position: relative; padding-left: 10px;">
                <div style="width: 48px; height: 48px; border: solid 1px black; border-radius: 24px; background-image: url(img/266df7ce-375b-4f98-af5d-f7f52f9a1ab5.jpg); background-size: cover;"></div>
                <div style="position: absolute; left: 17px;">沈阳</div>
            </div>
            <div style="position: relative; padding-left: 10px;">
                <div style="width: 48px; height: 48px; border: solid 1px black; border-radius: 24px; background-image: url(img/157ec2d9-3b1f-4982-8c36-25d2160c6e34.jpg); background-size: cover;"></div>
                <div style="position: absolute; left: 17px;">广州</div>
            </div>
            <div style="position: relative; padding-left: 10px;">
                <div style="width: 48px; height: 48px; border: solid 1px black; border-radius: 24px; background-image: url(img/3f74cba7-e12d-4582-b5be-bd43c2c70ecb.jpg); background-size: cover;"></div>
                <div style="position: absolute; left: 17px;">缅甸</div>
            </div>



        </div>
        <div style="padding-top: 100px;">最近搜索
        </div>
    </div>




    <!-- 模态框区域 -->
    <!-- 登录的模态框 -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header wjc-nav-login-modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">登录爱彼迎</h4>
                </div>
                <div class="modal-body">
                    <form action="#" method="post">
                        <div class="form-group">
                            <label class="sr-only" for="wjc-login-lname">电子邮件地址</label>
                            <input type="text" name="lname" id="wjc-login-lname" class="form-control input-lg"
                                placeholder="电子邮件地址">
                        </div>
                        <div class="form-group">
                            <label class="sr-only" for="wjc-login-lpass">密码</label>
                            <input type="password" name="lpass" class="form-control input-lg" id="wjc-login-lpass"
                                placeholder="密码">
                        </div>
                        <div class="form-group">
                            <div class="checkbox">
                                <label>
                                    <input type="checkbox"> 记住我
                                </label>
                            </div>
                        </div>
                        <button type="button" id="wjc-btn-login" class="btn btn-success btn-lg btn-block">登录</button>
                    </form>
                </div>
                <div class="modal-footer wjc-nav-login-modal-footer">
                    <span>还没有账号？</span>
                    <button type="button" class="btn btn-danger" data-dismiss="modal" onclick="location.href='register.html'">注册</button>
                </div>
            </div>
        </div>
    </div>

    <!-- JavaScript引用 -->
    <!-- JQuery.js -->
    <script src="js/jquery-3.3.1.min.js"></script>
    <!-- Bootstrap.js -->
    <script src="js/bootstrap.min.js"></script>
    <!-- 修复IE10的媒体查询bug -->
    <script src="js/ie10-viewport-bug-workaround.js"></script>
    <!-- 导航栏 -->
    <script src="js/navigation-bar.js"></script>
    <!-- 主体内容 -->
    <script src="js/QAQ.js"></script>
</body>

</html>